import { queryRaffleStrategyRuleWeight } from "@/apis";
import { useEffect, useState } from "react";
import { StrategyRuleWeightVO } from "@/types/StrategyRuleWeightVO";

// @ts-ignore
export function StrategyRuleWeight({ refresh }) {
    const [strategyRuleWeightVOList, setStrategyRuleWeightVOList] = useState<
        StrategyRuleWeightVO[]
    >([]);
    const [visible, setVisible] = useState(true); // 新增状态，控制是否显示浮层

    const queryRaffleStrategyRuleWeightHandle = async () => {
        const queryParams = new URLSearchParams(window.location.search);
        const userId = String(queryParams.get("userId"));
        const activityId = Number(queryParams.get("activityId"));
        if (!userId || userId === "null" || !activityId) {
            return;
        }
        const result = await queryRaffleStrategyRuleWeight(userId, activityId);
        const {
            code,
            info,
            data,
        }: { code: string; info: string; data: StrategyRuleWeightVO[] } =
            await result.json();

        if (code != "0000") {
            window.alert(
                "查询活动账户额度，接口调用失败 code:" + code + " info:" + info
            );
            return;
        }

        const sortedData = data.slice().sort((a, b) => a.ruleWeightCount - b.ruleWeightCount);

        setStrategyRuleWeightVOList(sortedData);
    };

    // 进度条组件
    // @ts-ignore
    const ProgressBar = ({ index, total, completed, awards }) => {
        const percentage = (completed / total) * 100;

        return (
            <div className="w-full">
                <div className="flex items-center">
                    <div className="mr-2">
            <span className="text-xs font-bold text-white">
              抽奖阶梯{index + 1}
            </span>
                    </div>
                    <div className="bg-gray-200 rounded-full h-4 relative overflow-hidden flex-grow">
                        <div
                            className="bg-gradient-to-r from-blue-600 to-blue-400 h-4 rounded-full"
                            style={{ width: `${percentage > 100 ? 100 : percentage}%` }}
                        ></div>
                        <div
                            className="absolute right-0 top-0 h-4 flex items-center justify-end pr-1"
                            style={{ width: `100%` }}
                        >
              <span className="text-xs font-bold text-black">
                {completed > total ? total : completed}/{total}
              </span>
                        </div>
                    </div>
                </div>
                {awards && (
                    <div className="mt-2">
                        <div className="text-xs text-white font-semibold mb-1">
                            必中奖品范围
                        </div>
                        {awards.map(
                            (
                                award: { awardId: string | number; awardTitle: string },
                                idx: number
                            ) => (
                                <div key={award.awardId} className="text-xs text-white pl-2">
                                    {idx + 1}. {award.awardTitle}
                                </div>
                            )
                        )}
                    </div>
                )}
            </div>
        );
    };

    useEffect(() => {
        queryRaffleStrategyRuleWeightHandle();
    }, [refresh]);

    return (
        <>
            {/* 控制显示隐藏的按钮 */}
            <button
                onClick={() => setVisible(!visible)}
                className="fixed top-1/2 right-4 z-60 p-2 bg-orange-400 hover:bg-orange-500 text-white rounded-l"
                style={{ transform: "translateY(-50%)" }}
            >
                {visible ? "隐藏进度" : "显示进度"}
            </button>

            {/* 内容区域，受 visible 控制显示隐藏 */}
            {visible && (
                <div
                    className="fixed top-1/2 right-12 transform -translate-y-1/2 w-64 max-h-[80vh] overflow-y-auto rounded-lg p-4 shadow-lg z-50"
                    style={{
                        backdropFilter: "blur(12px)",
                        background: "rgba(255, 255, 255, 0.12)",
                        border: "1px solid rgba(255, 255, 255, 0.2)",
                        boxShadow: "0 8px 32px 0 rgba(31, 38, 135, 0.1)",
                    }}
                >
                    {strategyRuleWeightVOList.length === 0 && (
                        <p className="text-sm text-white text-center">暂无抽奖阶梯数据</p>
                    )}
                    {strategyRuleWeightVOList.map((ruleWeight, index) => (
                        <div key={index} className="mb-6 last:mb-0">
                            <ProgressBar
                                index={index}
                                total={ruleWeight.ruleWeightCount}
                                completed={ruleWeight.userActivityAccountTotalUseCount}
                                awards={ruleWeight.strategyAwards}
                            />
                        </div>
                    ))}
                </div>
            )}
        </>
    );
}
